<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模版语法</title>
	</head>
	<body>
		<div id="app">
			
			<h1>指令</h1>
			<p v-if="seen">现在你看到我了</p>
			<a v-bind:href="url">百度一下</a>
			<a v-on:click="doAlert">是否跳转</a>

			
			
			<h1>模版插值</h1>
			<p>{{msg1}}</p>
			<p v-once>{{msg1}}</p>
			
			<p>{{ rawHtml }}</p>
			<p>Using raw html：<span v-html="rawHtml"></span></p>
			
			<p v-bind:id="dynamicId">Attribute</p>
			<button v-bind:disabled="isButtonDisabled">Button</button>
			
			<p>{{number+1}}</p>
			<p>{{ok ? 'Yes' : 'No'}}</p>
			<p>{{ msg1.split('').reverse().join('') }}</p>
			<p v-bind:id="'list-'+id"></p>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				url:'http://www.baidu.com',
				seen:true,
				msg1:'Hello Vue2',
				rawHtml:'<span style="color:red">This is red</span>',
				dynamicId:1,
				isButtonDisabled:false,
				number:100,
				ok:true,
				id:1,
			},
			methods:{
				doAlert:function(){
					alert(111);
				}
			}
		})
	
	</script>
</html>